@use "styles/BoxShadow.module.scss";
@use "styles/ScreenSizes.module.scss";
@use "styles/Spacings.module.scss";
@use "styles/Variables.module.scss";
@use "styles/ZIndexes.module.scss";

.menu_container {
  background-color: var(--background-1);
  border-right: 1px solid var(--border-1);
  width: Variables.$menuWidth;
  transition: width 0.1s ease-in-out;

  &.hidden {
    width: 0;
  }

  .menu_wrapper {
    padding-top: Spacings.$spacing05;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: scroll;

    .quivr_logo_wrapper {
      cursor: pointer;
      margin-inline: auto;
      display: flex;
      justify-content: center;
    }

    .buttons_wrapper {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: Spacings.$spacing05;
      flex-grow: 1;
      gap: Spacings.$spacing05;

      .block {
        display: flex;
        flex-direction: column;
        gap: Spacings.$spacing04;
      }
    }

    .social_buttons_wrapper {
      padding-block: Spacings.$spacing04;
      border-top: 1px solid var(--border-1);
    }
  }
}

.menu_control_button_wrapper {
  background-color: transparent;
  position: absolute;
  top: Spacings.$spacing05;
  left: Spacings.$spacing05;
  transition: margin-left 0.2s ease-in-out;
  z-index: ZIndexes.$overlay;

  &.shifted {
    margin-left: 180px;
  }
}

.notifications_panel {
  width: 400px;
  position: absolute;
  top: Variables.$pageHeaderHeight;
  min-height: calc(100% - Variables.$pageHeaderHeight);
  max-height: calc(100% - Variables.$pageHeaderHeight);
  overflow: scroll;
  left: calc(Variables.$menuWidth);
  z-index: ZIndexes.$overlay;
  border-right: 1px solid var(--border-1);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
  background-color: var(--background-0);

  @media (max-width: ScreenSizes.$small) {
    width: 100%;
    left: 0;
    min-height: 100vh;
    max-height: 100vh;
    top: 0;
  }
}
